<template>
    <div class="rootMain">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#409EFF"
        >
            <el-menu-item
                class="menuItem"
                v-for="(item, index) in menuList"
                :key="index"
                :index="item.index"
                @click="clickMenu(item)"
                >{{ item.name }}</el-menu-item
            >
        </el-menu>
        <template v-if="userInfo.is_major == 1">
            <div v-loading="loading" class="ask-list">
                <div
                    v-for="(item, index) in answerList"
                    :key="index"
                    class="ask-item"
                    @click="goDetail(item)"
                >
                    <div class="ask-title">
                        <div class="tag">
                            {{ item.status == 2 ? "正在回答" : "已完成" }}
                        </div>
                        <div class="ask-title-name">
                            {{ item.title }}
                        </div>
                    </div>
                    <div class="ask-time">{{ item.add_time_text }}</div>
                    <div
                        v-if="item.status == 3"
                        class="bcda"
                        @click.stop="goDetail2(item)"
                    >
                        补充答案
                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <div v-if="count > limit" class="page">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="limit"
                    :total="count"
                    @current-change="changePage"
                >
                </el-pagination>
            </div>
            <template v-if="answerList.length == 0">
                <el-empty description="暂无数据"></el-empty>
            </template>
        </template>
        <template v-else>
            <div class="no-major">
                <div class="text1">
                    您当前不是专业人士，如想成为专业人士，请下载小竹财税APP申请
                </div>
                <img src="~/assets/images/index/app_code.png" alt="" />
                <div class="text2">下载APP，成为专业人士</div>
            </div>
        </template>
    </div>
</template>

<script>
import { getJianghuMyAns_chat } from "@/assets/api/userCenterApi.js";
import { mapState } from "vuex";
export default {
    name: "myAnswer",
    props: ["lists"],
    metaInfo() {
        return {
            title: "个人中心-我的回答",
            meta: [{ name: "keywords", content: "小竹,财税,小竹财税" }],
        };
    },
    data() {
        return {
            page: 1,
            limit: 5,
            status: 0,
            is_del: "",

            activeIndex: "1",
            count: 0,
            menuList: [
                {
                    name: "全部",
                    index: "1",
                    status: 0,
                },
                {
                    name: "正在回答",
                    index: "2",
                    status: 2,
                },
                {
                    name: "已完成",
                    index: "3",
                    status: 3,
                },
            ],
            answerList: [],

            loading: false,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    mounted() {
        this.getMyAnswerList();
    },
    methods: {
        //被删除的标题的颜色
        showTitleClss(item) {
            if (item.is_del == "1") {
                return "cCCC";
            }
            return "";
        },
        clickMenu(item) {
            this.page = 1;
            this.status = item.status;
            this.is_del = item.is_del;
            this.getMyAnswerList();
        },
        //分页
        changePage(e) {
            this.page = e;
            this.getMyAnswerList();
        },
        // 获取数据列表
        async getMyAnswerList() {
            this.loading = true;
            var params = {
                status: this.status,
                // is_del: this.is_del,
                page: this.page,
                pagesize: this.limit,
            };
            let res = await getJianghuMyAns_chat(params);
            this.loading = false;
            if (res.code == 1) {
                this.answerList = res.data.list;
                // if (this.answerList.length > 0) {
                //     this.count = this.answerList[0].datacount;
                // } else {
                this.count = res.data.count;
                // }
            }
        },

        goDetail(item) {
            if (item.status == 3) {
              
                let { href } = this.$router.resolve({
                    path: "/cswd/" + item.id + ".html",
                });
                window.open(href, "_blank");
            } else {
                this.$router.push({
                    path: `/chat/${item.id}`
                });
              
            }
        },

        goDetail2(item) {
            this.$router.push({
                path: `/chat/${item.id}?type=bc`
            });
        },

        //动态展示文字颜色
        showTypeColor(item) {
            var color = "c50A7FF";
            switch (item.type_text) {
                case "会计":
                    color = "c50A7FF";
                    break;

                case "税法":
                    color = "cFF7F7F";
                    break;
            }
            return color;
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-menu--horizontal>.el-menu-item{
    color: #333333;
}
.no-major {
    padding-top: 88px;
    padding-bottom: 380px;
    text-align: center;
    .text1 {
        text-align: center;
        font-size: 18px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        color: #333333;
        padding-bottom: 30px;
    }
    img {
        width: 124px;
        height: 124px;
    }
    .text2 {
        padding-top: 14px;
        font-size: 14px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        color: #333333;
    }
}
.rootMain {
    background-color: #fff;
    margin-left: 20px;
    min-width: 300px;

    .quizList {
        position: relative;
        padding: 20px;
        padding-left: 50px;
        background-color: #fff;
        border-bottom: 1px solid #f4f4f4;

        .leaf {
            width: 11px;
            height: 18px;
            margin-right: 2px;
        }
        .leafNum {
            margin-right: 20px;
            color: #ff5900;
            font-size: 18px;
        }

        .title {
            width: 792px;
            font-size: 18px;
        }
        .info {
            font-size: 14px;
            margin-top: 30px;

            .time {
                color: #9e9e9e;
                margin-right: 20px;
            }
            .watched {
                color: #9e9e9e;
                margin-right: 20px;
            }
            .major {
                width: 48px;
                height: 22px;
                line-height: 22px;
                border-radius: 2px;
                font-size: 14px;
                // color: #50A7FF;
                text-align: center;
            }
        }
        .tips {
            position: absolute;
            top: 20px;
            right: 37px;

            img {
                width: 20px;
                height: 24px;
                vertical-align: middle;
            }
        }
    }
    .page {
        padding-top: 13px;
        padding-bottom: 63px;
        display: flex;
        justify-content: center;
    }

    .cFF7F7F {
        color: #ff7f7f;
        background: #fff2f2;
    }

    .c50A7FF {
        color: #50a7ff;
        background: #eef6ff;
    }
    .cCCC {
        color: #ccc;
    }
}

.ask-list {
}

.ask-item {
    border-bottom: 1px solid #f4f4f4;
    padding: 33px 42px;
    // margin: 0 42px;
    cursor: pointer;
    position: relative;
    &:hover {
        background-color: #f4f8ff;
    }
    .ask-title {
        display: flex;
        // align-items: center;
        .ask-title-name {
            width: 690px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tag {
            line-height: 26px;
            text-align: center;
            font-size: 14px;
            color: #50a7ff;
            width: 58px;
            min-width: 58px;
            height: 26px;
            background: #eef7ff;
            border-radius: 2px;
            margin-right: 10px;
        }
        font-size: 17px;
        color: #333333;
    }

    .ask-time {
        padding-top: 14px;
        font-size: 14px;
        color: #9e9e9e;
    }

    &:hover {
        .bcda {
            display: block;
        }
    }

    .bcda {
        display: none;
        position: absolute;
        right: 37px;
        top: 31px;
        font-size: 14px;
        color: #333333;
        width: 89px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50px;
        border: 1px solid #333333;
        cursor: pointer;
        &:hover {
            opacity: 0.8;
        }
    }
}
</style>./myanswer.vue
